<template>
  <div id="playMv">
    <video ref="video" class="video" :src="mvUrl" controls :poster="mvData.cover"></video>
    <!-- mv介绍 -->
    <van-cell>
      <template #icon>
        <van-image round :src="mvData.artists[0].img1v1Url" />
      </template>
      <template #title>
        <p class="name">{{ mvData.artistName }}</p>
        <p class="time">{{ mvData.publishTime }}</p>
      </template>
      <template #label>
        <p class="mvText" :class="isExpand ? 'isExpand' : ''">
          <span ref="introduce" class="introduce"
            >《{{ mvData.name }}》  {{ mvData.desc }}</span
          >
          <span v-if="isShowExpand" @click="isExpand = !isExpand" class="expand"
            >{{ isExpand ? '展开...' : '收起' }}</span
          >
        </p>
      </template>
      <template>
        <p>播放{{ mvData.playCount | playCount }}</p>
        <ShareMv v-if="mvData.shareCount" :shareCount="mvData.shareCount" />
      </template>
    </van-cell>

    <CommentList :id="$route.params.mvid" :type="1" />
  </div>
</template>

<script>
import ShareMv from './ShareMv.vue'
import CommentList from '@/components/Comment/CommentList'
import { getMvUrl, getMvData } from '@/api/mv.js'
import { mapGetters } from 'vuex'
export default {
  name: 'PlayMV',
  data () {
    return {
      mvUrl: '',
      mvData: {
        artists: [{ img1v1Url: '' }]
      },
      introduceHeight: 0, // 行数是否要展开
      isShowExpand: false, // 是否显示展开
      isExpand: true // 展开状态
    }
  },
  components: {
    CommentList,
    ShareMv
  },
  computed: {
    ...mapGetters(['audio'])
  },
  created () {
    this.loadMvInfo()
  },
  updated () {
    this.loadIntroduceHeight()
    this.pauseMusic()
  },
  beforeDestroy () {
    this.$store.commit('layout/loadMvTitle', '')
  },
  // 定义方法
  methods: {
    async loadMvInfo () {
      try {
        // 获取mv url地址
        const { data: urlRes } = await getMvUrl({
          id: this.$route.params.mvid
        })
        this.mvUrl = urlRes.url
        // 获取mv信息
        const { data: dataRes } = await getMvData({
          mvid: this.$route.params.mvid
        })
        this.mvData = dataRes
        this.$store.commit('layout/loadMvTitle', `《${dataRes.name}》`)
      } catch (err) {}
    },
    // 获取介绍高度 判断是否显示展开
    loadIntroduceHeight () {
      this.introduceHeight = this.$refs.introduce.offsetHeight
      if (this.introduceHeight > 53) {
        this.isShowExpand = true
      } else {
        this.isShowExpand = false
      }
    },
    // 进入播放mv页面暂停音乐
    pauseMusic () {
      this.audio.pause()
      this.$store.commit('play/loadPaused', true)
    }
  }
}
</script>

<style scoped lang="less">
#playMv {
  .video {
    width: 100%;
  }

  .van-cell {
    text-align: left;
    margin-bottom: 20px;
    .van-image {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .van-cell__title {
      flex: 2;
      .name {
        font-size: 14px;
        color: #333;
      }
      .time {
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        color: #666;
      }
    }
    .mvText {
      position: relative;
      .introduce {
        display: block;
      }
      .expand {
        position: absolute;
        right: -30px;
        bottom: -8px;
        color: rgb(11, 154, 236);
        z-index: 99;
      }
    }
    .isExpand {
      height: 45px;
    }
  }
}
</style>
